<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>研发创新效果分析看板</title>
    <!-- 引入外部资源 -->
    <script src="../public/js/tailwindcss3.4.16"></script>
    <link href="../font-awesome/css/all.min.css" rel="stylesheet">
    <script src="../chart.umd.min.js"></script>
    <link rel="stylesheet" href="style.css">

    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#0FC6C2',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                        success: '#00B42A',
                        info: '#86909C',
                        light: '#F2F3F5',
                        dark: '#1D2129',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                },
            }
        }
    </script>
    <style>
    /* 折叠时隐藏侧边栏文字，仅显示图标 */
    .sidebar-collapsed span,
    .sidebar-collapsed .text-xs,
    .sidebar-collapsed .font-semibold,
    .sidebar-collapsed h1 {
        display: none !important;
    }
    .sidebar-collapsed nav {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* 图例样式 */
    .legend-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0.75rem;
    }
    .legend-color {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        margin-right: 8px;
    }
    </style>
</head>
<body class="font-inter bg-gray-50 text-dark">
<!-- 顶部导航栏 -->
<header class="bg-white fixed top-0 left-0 right-0 z-50 nav-shadow">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
        <div class="flex items-center space-x-2">
            <!-- 侧边栏折叠/展开按钮 -->
            <button id="toggleSidebar" class="mr-2 text-primary text-2xl focus:outline-none">
                <i class="fa fa-bars"></i>
            </button>
            <h1 class="text-xl font-bold text-primary">研发创新效果分析看板</h1>
        </div>

        <div class="flex items-center space-x-4">
            <div class="relative">
                <input type="text" placeholder="搜索指标..." class="pl-10 pr-4 py-2 rounded-full border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all">
                <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
            </div>

            <div class="relative">
                <button class="flex items-center space-x-1 text-gray-600 hover:text-primary transition-colors">
                    <i class="fa fa-bell text-lg"></i>
                    <span class="absolute -top-1 -right-1 bg-danger text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">3</span>
                </button>
            </div>

            <div class="flex items-center space-x-2">
                <img src="../public/image/user.jpg" alt="用户头像" class="h-8 w-8 rounded-full object-cover border-2 border-primary">
                <span class="text-sm font-medium">管理员</span>
            </div>
        </div>
    </div>
</header>

<!-- 侧边栏导航 -->
<aside id="sidebar" class="fixed top-0 left-0 bottom-0 w-64 bg-white pt-16 nav-shadow z-40 transition-all duration-300 ease-in-out transform">
    <div class="h-full overflow-y-auto scrollbar-hide">
        <nav class="p-4 space-y-1">
            <div class="text-xs uppercase text-gray-400 font-semibold mb-2 pl-2">分析维度</div>

            <a href="#core-indicators" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-chart-line text-lg w-5 text-center"></i>
                <span>核心指标</span>
            </a>

            <a href="#trend-analysis" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-money-bill-trend-up text-lg w-5 text-center"></i>
                <span>趋势与结构分析</span>
            </a>

            <a href="#structure-analysis" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-pie-chart text-lg w-5 text-center"></i>
                <span>结构分析</span>
            </a>

            <a href="#achievement-details" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-trophy text-lg w-5 text-center"></i>
                <span>主要成果明细</span>
            </a>

            <a href="#detail-table" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-table text-lg w-5 text-center"></i>
                <span>明细表</span>
            </a>

            <div class="text-xs uppercase text-gray-400 font-semibold mb-2 pl-2">分析看板</div>
            
            <a href="../客户分析看板html5/customer.html" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-users text-lg w-5 text-center"></i>
                <span>1.客户</span>
            </a>
            <a href="../供应商分析看板html5/supplier.html" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-truck text-lg w-5 text-center"></i>
                <span>2.供应商</span>
            </a>
            <a href="../物资分析看板html5/materials.html" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-cubes text-lg w-5 text-center"></i>
                <span>3.物资</span>
            </a>
            <a href="../产品分析看板html5/product.html" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-cube text-lg w-5 text-center"></i>
                <span>4.产品</span>
            </a>
            <a href="../人员分析看板html5/index.html" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-user-friends text-lg w-5 text-center"></i>
                <span>5.人员</span>
            </a>
            <a href="../业务领域分析看板html5/index.html" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-sitemap text-lg w-5 text-center"></i>
                <span>6.业务领域</span>
            </a>
            <a href="../型号项目成本分析看板html5/index.html" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-calculator text-lg w-5 text-center"></i>
                <span>7.型号项目成本</span>
            </a>
            <a href="../财务指标分析看板html5/index.html" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-chart-line text-lg w-5 text-center"></i>
                <span>8.财务指标</span>
            </a>
            <a href="../固定资产投资效果分析看板html5/index.html" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-building text-lg w-5 text-center"></i>
                <span>9.固定资产投资效果</span>
            </a>
            <a href="../研发创新效果分析看板html5/index.html" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-flask text-lg w-5 text-center"></i>
                <span>10.研发创新效果</span>
            </a>
        </nav>
    </div>
</aside>

<!-- 主内容区 -->
<main id="mainContent" class="pt-16 pb-10 pl-64 min-h-screen">
    <div class="container mx-auto px-4 py-6">
        <!-- 筛选条件区域 -->
        <div class="bg-white rounded-xl p-4 mb-6 card-shadow">
            <div class="flex flex-wrap items-center justify-between gap-4">
                <div class="flex flex-wrap items-center gap-4">
                    <div class="flex items-center">
                        <span class="text-gray-600 mr-2">年份:</span>
                        <select id="year" class="px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                            <option value="2023" selected>2023年</option>
                            <option value="2022">2022年</option>
                            <option value="2021">2021年</option>
                            <option value="2020">2020年</option>
                            <option value="2019">2019年</option>
                        </select>
                    </div>

                    <div class="flex items-center">
                        <span class="text-gray-600 mr-2">费用来源:</span>
                        <select id="fundSource" class="px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                            <option value="all" selected>全部来源</option>
                            <option value="government">来源1</option>
                            <option value="enterprise">来源2</option>
                            <option value="cooperation">来源3</option>
                            <option value="other">来源4</option>
                        </select>
                    </div>

                    <div class="flex items-center">
                        <span class="text-gray-600 mr-2">领域:</span>
                        <select id="field" class="px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                            <option value="all" selected>全部领域</option>
                            <option value="electronics">领域1</option>
                            <option value="mechanical">领域2</option>
                            <option value="chemical">领域3</option>
                            <option value="biomedical">领域4</option>
                            <option value="energy">领域5</option>
                        </select>
                    </div>

                    <div class="flex items-center">
                        <span class="text-gray-600 mr-2">部门:</span>
                        <select id="department" class="px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                            <option value="all" selected>全部部门</option>
                            <option value="rd">部门1</option>
                            <option value="tech">部门2</option>
                            <option value="product">部门3</option>
                            <option value="innovation">部门4</option>
                        </select>
                    </div>
                </div>

                <div class="flex items-center">
                    <button id="applyFilter" class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg transition-colors flex items-center">
                        <i class="fa fa-filter mr-2"></i>
                        <span>应用筛选</span>
                    </button>
                    <button id="resetFilter" class="ml-2 text-gray-600 hover:text-gray-800 px-4 py-2 rounded-lg transition-colors flex items-center">
                        <i class="fa fa-refresh mr-2"></i>
                        <span>重置</span>
                    </button>
                </div>
            </div>
        </div>

        <!-- 一级驾驶舱 - 核心指标 -->
        <section id="core-indicators" class="mb-8">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-2xl font-bold text-dark">核心指标</h2>
                <div class="text-sm text-gray-500">实时监控研发创新关键指标</div>
            </div>

            <!-- 核心指标卡片 -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4 mb-6">
                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('rdFee')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">研发费用总数</h3>
                        <i class="fa fa-money text-primary"></i>
                    </div>
                    <p class="text-2xl font-bold">¥10,000万元</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 +2%</span>
                        <span class="text-success">环比 +1%</span>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('rdPersonnel')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">研发人员数</h3>
                        <i class="fa fa-users text-secondary"></i>
                    </div>
                    <p class="text-2xl font-bold">1,200人</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 +5%</span>
                        <span class="text-success">环比 +2%</span>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('innovationReturn')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">创新回报率</h3>
                        <i class="fa fa-chart-line text-warning"></i>
                    </div>
                    <p class="text-2xl font-bold">30%</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 +5%</span>
                        <span class="text-success">环比 +3%</span>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('patentConversion')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">专利转化率</h3>
                        <i class="fa fa-lightbulb text-info"></i>
                    </div>
                    <p class="text-2xl font-bold">5%</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 +5%</span>
                        <span class="text-success">环比 +2%</span>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('rdInvestmentRatio')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">研发投入比</h3>
                        <i class="fa fa-percentage text-success"></i>
                    </div>
                    <p class="text-2xl font-bold">30%</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 +3%</span>
                        <span class="text-success">环比 +1%</span>
                    </div>
                </div>
            </div>
        </section>

        <!-- 一级驾驶舱 - 趋势与结构分析 -->
        <section id="trend-analysis" class="mb-8">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-2xl font-bold text-dark">趋势与结构分析</h2>
                <div class="text-sm text-gray-500">研发创新投入与产出趋势分析</div>
            </div>

            <!-- 研发创新投入与产出趋势图表 -->
            <div class="bg-white rounded-xl p-5 card-shadow mb-6">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-semibold">研发创新投入与产出趋势</h3>
                    <button onclick="showDetail('rdTrendAnalysis')" class="text-primary text-sm hover:underline">
                        详细分析 <i class="fa fa-arrow-right ml-1"></i>
                    </button>
                </div>
                <div class="h-80">
                    <canvas id="rdTrendChart"></canvas>
                </div>
            </div>
        </section>

        <!-- 一级驾驶舱 - 结构分析 -->
        <section id="structure-analysis" class="mb-8">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-2xl font-bold text-dark">结构分析</h2>
                <div class="text-sm text-gray-500">研发费用与人员结构分布</div>
            </div>

            <!-- 结构分析图表 -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
                <!-- 研发费用按投入结构分类 -->
                <div class="bg-white rounded-xl p-5 card-shadow">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold">研发费用按投入结构分类</h3>
                        <button onclick="showDetail('rdFeeStructure')" class="text-primary text-sm hover:underline">
                            详细分析 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div class="h-64 flex items-center justify-center">
                            <canvas id="rdFeeStructureChart"></canvas>
                        </div>
                        <div class="flex flex-col justify-center">
                            <div class="space-y-3" id="rdFeeStructureLegend">
                                <!-- 图例将通过JavaScript动态生成 -->
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 研发人数按投入结构分类 -->
                <div class="bg-white rounded-xl p-5 card-shadow">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold">研发人数按投入结构分类</h3>
                        <button onclick="showDetail('rdPersonnelStructure')" class="text-primary text-sm hover:underline">
                            详细分析 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div class="h-64 flex items-center justify-center">
                            <canvas id="rdPersonnelStructureChart"></canvas>
                        </div>
                        <div class="flex flex-col justify-center">
                            <div class="space-y-3" id="rdPersonnelStructureLegend">
                                <!-- 图例将通过JavaScript动态生成 -->
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 研发费用按投入领域分类 -->
                <div class="bg-white rounded-xl p-5 card-shadow">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold">研发费用按投入领域分类</h3>
                        <button onclick="showDetail('rdFeeField')" class="text-primary text-sm hover:underline">
                            详细分析 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div class="h-64 flex items-center justify-center">
                            <canvas id="rdFeeFieldChart"></canvas>
                        </div>
                        <div class="flex flex-col justify-center">
                            <div class="space-y-3" id="rdFeeFieldLegend">
                                <!-- 图例将通过JavaScript动态生成 -->
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 研发人数按投入领域分类 -->
                <div class="bg-white rounded-xl p-5 card-shadow">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold">研发人数按投入领域分类</h3>
                        <button onclick="showDetail('rdPersonnelField')" class="text-primary text-sm hover:underline">
                            详细分析 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div class="h-64 flex items-center justify-center">
                            <canvas id="rdPersonnelFieldChart"></canvas>
                        </div>
                        <div class="flex flex-col justify-center">
                            <div class="space-y-3" id="rdPersonnelFieldLegend">
                                <!-- 图例将通过JavaScript动态生成 -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 一级驾驶舱 - 主要成果明细 -->
        <section id="achievement-details" class="mb-8">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-2xl font-bold text-dark">主要成果明细</h2>
                <div class="text-sm text-gray-500"></div>
            </div>

            <!-- 主要成果明细图表 -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
                <!-- 成本节约TOP5 -->
                <div class="bg-white rounded-xl p-5 card-shadow">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold">项目成本TOP5</h3>
                        <button onclick="showDetail('costSavingTop5')" class="text-primary text-sm hover:underline">
                            详细分析 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                    <div class="h-64">
                        <canvas id="costSavingChart"></canvas>
                    </div>
                </div>

                <!-- 创新回报TOP5 -->
                <div class="bg-white rounded-xl p-5 card-shadow">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold">创新回报率TOP5</h3>
                        <button onclick="showDetail('innovationReturnTop5')" class="text-primary text-sm hover:underline">
                            详细分析 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                    <div class="h-64">
                        <canvas id="innovationReturnChart"></canvas>
                    </div>
                </div>

                <!-- 合同额TOP5 -->
                <div class="bg-white rounded-xl p-5 card-shadow">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold">合同额TOP5</h3>
                        <button onclick="showDetail('contractAmountTop5')" class="text-primary text-sm hover:underline">
                            详细分析 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                    <div class="h-64">
                        <canvas id="contractAmountChart"></canvas>
                    </div>
                </div>

                <!-- 专利数TOP5 -->
                <div class="bg-white rounded-xl p-5 card-shadow">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold">专利数TOP5</h3>
                        <button onclick="showDetail('patentTop5')" class="text-primary text-sm hover:underline">
                            详细分析 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                    <div class="h-64">
                        <canvas id="patentChart"></canvas>
                    </div>
                </div>
            </div>
        </section>

        <!-- 一级驾驶舱 - 明细表 -->
        <section id="detail-table" class="mb-8">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-2xl font-bold text-dark">明细表</h2>
                <div class="text-sm text-gray-500">年度研发创新数据明细</div>
            </div>

            <!-- 明细表 -->
            <div class="bg-white rounded-xl p-5 card-shadow">
                <div class="overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead>
                            <tr class="border-b border-gray-200">
                                <th class="text-left py-3 px-4 font-semibold text-gray-700">年份</th>
                                <th class="text-right py-3 px-4 font-semibold text-gray-700">研发费用(万元)</th>
                                <th class="text-right py-3 px-4 font-semibold text-gray-700">研发投入比(%)</th>
                                <th class="text-right py-3 px-4 font-semibold text-gray-700">创新回报率(%)</th>
                                <th class="text-right py-3 px-4 font-semibold text-gray-700">专利数(件)</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="border-b border-gray-100 hover:bg-gray-50">
                                <td class="py-3 px-4">2023</td>
                                <td class="py-3 px-4 text-right">10,000</td>
                                <td class="py-3 px-4 text-right">30%</td>
                                <td class="py-3 px-4 text-right">30%</td>
                                <td class="py-3 px-4 text-right">156</td>
                            </tr>
                            <tr class="border-b border-gray-100 hover:bg-gray-50">
                                <td class="py-3 px-4">2022</td>
                                <td class="py-3 px-4 text-right">9,800</td>
                                <td class="py-3 px-4 text-right">29%</td>
                                <td class="py-3 px-4 text-right">28%</td>
                                <td class="py-3 px-4 text-right">142</td>
                            </tr>
                            <tr class="border-b border-gray-100 hover:bg-gray-50">
                                <td class="py-3 px-4">2021</td>
                                <td class="py-3 px-4 text-right">9,500</td>
                                <td class="py-3 px-4 text-right">28%</td>
                                <td class="py-3 px-4 text-right">26%</td>
                                <td class="py-3 px-4 text-right">128</td>
                            </tr>
                            <tr class="border-b border-gray-100 hover:bg-gray-50">
                                <td class="py-3 px-4">2020</td>
                                <td class="py-3 px-4 text-right">9,200</td>
                                <td class="py-3 px-4 text-right">27%</td>
                                <td class="py-3 px-4 text-right">25%</td>
                                <td class="py-3 px-4 text-right">115</td>
                            </tr>
                            <tr class="hover:bg-gray-50">
                                <td class="py-3 px-4">2019</td>
                                <td class="py-3 px-4 text-right">8,800</td>
                                <td class="py-3 px-4 text-right">26%</td>
                                <td class="py-3 px-4 text-right">24%</td>
                                <td class="py-3 px-4 text-right">102</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </section>
    </div>
</main>

<!-- 穿透查询模态框 -->
<div id="detailModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center">
    <div class="bg-white rounded-xl w-full max-w-6xl max-h-[90vh] overflow-hidden flex flex-col">
        <div class="p-5 border-b border-gray-200 flex justify-between items-center">
            <h3 class="text-lg font-semibold" id="modalTitle">详细分析</h3>
            <button id="closeModal" class="text-gray-500 hover:text-gray-700">
                <i class="fa fa-times"></i>
            </button>
        </div>
        <div class="p-5 overflow-y-auto flex-1" id="modalContent">
            <!-- 这里将通过JavaScript动态填充内容 -->
        </div>
        <div class="p-5 border-t border-gray-200 flex justify-end">
            <button id="closeModalBtn" class="px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded-lg transition-colors">
                关闭
            </button>
        </div>
    </div>
</div>

<!-- JavaScript 代码 -->
<script src="index.js"></script>
</body>
</html> 